<template>
    <el-container>
        <el-header height="">
            <page-bar showBreadCrumb :pageInfo="pageInfo" @query="query"></page-bar>
            <area-title-bar
                :id="area.id"
                :name="area.name"
                :attend="attentionArea(area.id)"
                v-if="area"
                @attention="attention"
                @removeAttention="removeAttention"
                @query="query"></area-title-bar>
        </el-header>
        <el-main>
            <div v-if="posts.length>0">
                <post-item v-for="post in posts" :key="post.id" :post="post"></post-item>
            </div>
        </el-main>
        <el-footer height="">
            <page-bar :pageInfo="pageInfo" @query="query"></page-bar>
        </el-footer>
    </el-container>
</template>

<script>
    import PageBar from '@/components/common/PageBar'
    import AreaTitleBar from '@/components/area/AreaTitleBar'
    import PostItem from '@/components/post/PostItem'
    import { mapGetters, mapActions } from 'vuex'
    import ElFooter from 'element-ui/packages/footer/src/main'

    export default {
        name: 'areaPost',
        components: {
            ElFooter,
            PostItem,
            PageBar,
            AreaTitleBar
        },
        data () {
            return {
                area: {},
                posts: [],
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0
                },
                queryInfo: {
                    type: '',
                    asc: '',
                    desc: ''
                }
            }
        },
        mounted () {
            let query = this.$route.query
            if (query) {
                if (query.publish === 'true') {
                    this.$message.success('发帖成功')
                }
                if (query.deletePost === 'true') {
                    this.$message.success('删除成功')
                }
            }
            this.action(this.listAreaByNameAction(this.getArea()), data => {
                if (data.data.length === 0) {
                    this.$message.error('不存在该区域')
                } else {
                    this.area = data.data[0]
                }
                if (this.getUser) {
                    this.action(this.currentAttentionAreasAction())
                }
            })
            this.query()
        },
        computed: {
            ...mapGetters({
                attentionArea: 'area/attentionArea',
                getUser: 'user/getUser'
            })
        },
        methods: {
            ...mapActions({
                listAreaByNameAction: 'area/listAreaByName',
                attentionAreaAction: 'area/attentionArea',
                removeAttentionAreaAction: 'area/removeAttentionArea',
                currentAttentionAreasAction: 'area/currentAttentionAreas',
                pageAreaPostAction: 'post/pageAreaPost'
            }),
            getArea () {
                let paths = this.$route.path.split('/')
                return paths[2]
            },
            query (queryInfo) {
                if (queryInfo) {
                    this.queryInfo = queryInfo
                }
                this.action(this.pageAreaPostAction({
                    area: this.getArea(),
                    page: this.pageInfo.page,
                    size: this.pageInfo.size,
                    type: this.queryInfo.type,
                    asc: this.queryInfo.asc,
                    desc: this.queryInfo.desc
                }), data => {
                    this.pageInfo.total = data.data.total
                    this.posts = data.data.records
                })
            },
            attention () {
                this.action(this.attentionAreaAction(this.area.id), data => {
                    this.$message.success('关注成功')
                    this.area.attentionCount++
                    this.currentAttentionAreasAction().catch(reason => this.$message.error(reason))
                })
            },
            removeAttention () {
                this.action(this.removeAttentionAreaAction(this.area.id), data => {
                    this.$message.success('取消关注成功')
                    this.area.attentionCount--
                    this.currentAttentionAreasAction().catch(reason => this.$message.error(reason))
                })
            }
        }
    }
</script>

<style scoped>

</style>
